﻿
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历登记 - Vue 3版本</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/qs@6.10.3/dist/qs.min.js"></script>
    <style>
        .container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .breadcrumb {
            margin-bottom: 15px;
            font-size: 14px;
            color: #666;
        }

        .action-buttons {
            margin: 15px 0;
            text-align: right;
        }

        .form-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .el-form-item {
            margin-bottom: 15px;
        }

        .required-field::after {
            content: '*';
            color: #f56c6c;
            margin-left: 4px;
        }

        .m-4 {
            margin-right: 20px;
        }

        /* 图片上传区域样式 */
        .avatar-uploader .avatar {
            width: 120px;
            height: 120px;
            display: block;
            border-radius: 6px;
            object-fit: cover;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
            width: 120px;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .avatar-uploader .el-upload:hover {
                border-color: var(--el-color-primary);
            }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100%;
            height: 100%;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <!-- 面包屑导航 -->
            <div class="breadcrumb">
                <span>您正在做的业务是：人力资源--招聘管理--简历管理--简历登记</span>
            </div>

            <div class="form-title">简历登记表单</div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <el-button type="primary" v-on:click="submitForm">提交</el-button>
                <el-button v-on:click="resetForm">清除</el-button>
            </div>

            <!-- 简历登记表单 -->
            <el-form ref="formRef"
                     :model="formData"
                     :rules="rules"
                     label-width="100px"
                     class="register-form">
                <el-row :gutter="16">
                    
                        <!-- 第一行：职位信息 -->
                      
                     
                  
                    <el-col :span="8">
                        <el-form-item label="职位分类及名称" prop="majorId">
                            <el-cascader v-model="selectedCascaderValue"
                                         :options="cascaderOptions"
                                         :props="cascaderProps"
                                         v-on:change="handleCascaderChange"
                                         placeholder="请选择职位分类及名称"
                                         :loading="isLoading" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="招聘类型" prop="engage_type">
                            <el-select v-model="formData.engage_type" placeholder="--请选择--" style="width: 100%">
                                <el-option value="校园招聘" label="校园招聘"></el-option>
                                <el-option value="社会招聘" label="社会招聘"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                   
                   
                </el-row>

                <el-row :gutter="20">
                    <!-- 第二行：基本信息 -->
                    <el-col :span="6">
                        <el-form-item label="姓名" prop="human_name" class="required-field">
                            <el-input v-model="formData.human_name" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="性别" prop="human_sex">
                            <el-select v-model="formData.human_sex" placeholder="请选择">
                                <el-option value="男" label="男"></el-option>
                                <el-option value="女" label="女"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="EMAIL" prop="human_email">
                            <el-input v-model="formData.human_email" placeholder="请输入邮箱"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- 图片上传区域 -->
                    <el-col :span="6">
                        <el-form-item label="照片" prop="human_picture">
                            <div class="avatar-uploader">
                                <el-upload class="avatar-uploader"
                                           action="/Home/WJSC"
                                           :show-file-list="false"
                                           :on-success="handleAvatarSuccess"
                                           :on-error="handleAvatarError"
                                           :before-upload="beforeAvatarUpload"
                                           :disabled="isUploading"
                                           :headers="headers">
                                    <img v-if="formData.human_picture" :src="formData.imageUrl" class="avatar" />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                                <div v-if="uploadMessage" class="mt-2 text-sm text-primary">
                                    {{ uploadMessage }}
                                </div>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <!--    ：联系方式 -->
                    <el-col :span="6">
                        <el-form-item label="电话" prop="human_telephone" class="required-field">
                            <el-input v-model.number="formData.human_telephone" placeholder="请输入电话"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="家庭电话" prop="human_homephone">
                            <el-input v-model.number="formData.human_homephone" placeholder="请输入家庭电话"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="手机" prop="human_mobilephone">
                            <el-input v-model.number="formData.human_mobilephone" placeholder="请输入手机"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>



                <el-row :gutter="20">
                    <!-- 第四行：地址信息 -->
                    <el-col :span="9">
                        <el-form-item label="住址" prop="human_address">
                            <el-input v-model="formData.human_address" placeholder="请输入住址"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="邮编" prop="human_postcode">
                            <el-input v-model.number="formData.human_postcode" placeholder="请输入邮编"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <!-- 第五行：个人信息1 -->
                    <el-col :span="6">
                        <el-form-item label="国籍" prop="human_nationality">
                            <el-select v-model="formData.human_nationality" placeholder="请选择">
                                <el-option value="" label="--请选择--"></el-option>
                                <el-option value="中国" label="中国"></el-option>
                                <el-option value="美国" label="美国"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="出生地" prop="human_birthplace">
                            <el-input v-model="formData.human_birthplace" placeholder="请输入出生地"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="生日" prop="human_birthday">
                            <el-date-picker v-model="formData.human_birthday"
                                            type="date"
                                            placeholder="请选择生日"
                                            :disabled-date="disabledDate"
                                            style="width: 100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <!-- 第六行：个人信息2 -->
                    <el-col :span="6">
                        <el-form-item label="民族" prop="human_race">
                            <el-select v-model="formData.human_race" placeholder="请选择">
                                <el-option value="" label="--请选择--"></el-option>
                                <el-option value="汉族" label="汉族"></el-option>
                                <el-option value="回族" label="回族"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="宗教信仰" prop="human_religion">
                            <el-select v-model="formData.human_religion" placeholder="请选择">
                                <el-option value="无" label="无"></el-option>
                                <el-option value="佛教" label="佛教"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="政治面貌" prop="human_party">
                            <el-select v-model="formData.human_party" placeholder="请选择">
                                <el-option value="" label="--请选择--"></el-option>
                                <el-option value="党员" label="党员"></el-option>
                                <el-option value="群众" label="群众"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <!-- 第七行：个人信息3 -->
                    <el-col :span="6">
                        <el-form-item label="身份证号码" prop="human_idcard" class="required-field">
                            <el-input v-model="formData.human_idcard" placeholder="请输入身份证号码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="年龄" prop="human_age">
                            <el-input v-model.number="formData.human_age" placeholder="请输入年龄"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="毕业院校" prop="human_college">
                            <el-input v-model="formData.human_college" placeholder="请输入毕业院校"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="学历" prop="human_educated_degree">
                            <el-select v-model="formData.human_educated_degree" placeholder="请选择">
                                <el-option value="" label="--请选择--"></el-option>
                                <el-option value="本科" label="本科"></el-option>
                                <el-option value="大专" label="大专"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <!-- 第八行：教育信息 -->
                    <el-col :span="6">
                        <el-form-item label="教育年限" prop="human_educated_years">
                            <el-select v-model="formData.human_educated_years" placeholder="请选择">
                                <el-option value="" label="--请选择--"></el-option>
                                <el-option value="12" label="12"></el-option>
                                <el-option value="16" label="16"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="学历专业" prop="human_educated_major">
                            <el-select v-model="formData.human_educated_major" placeholder="请选择">
                                <el-option value="" label="--请选择--"></el-option>
                                <el-option value="生物工程" label="生物工程"></el-option>
                                <el-option value="计算机" label="计算机"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="薪酬要求" prop="demand_salary_standard">
                            <el-input v-model.number="formData.demand_salary_standard" placeholder="请输入薪酬要求"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="注册时间">
                            <el-input v-model="registTime" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <!-- 第九行：个人特长 -->
                    <el-col :span="6">
                        <el-form-item label="特长" prop="human_specility">
                            <el-select v-model="formData.human_specility" placeholder="请选择">
                                <el-option value="" label="--请选择--"></el-option>
                                <el-option value="数据库" label="数据库"></el-option>
                                <el-option value="java" label="java"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="爱好" prop="human_hobby">
                            <el-select v-model="formData.human_hobby" placeholder="请选择">
                                <el-option value="" label="--请选择--"></el-option>
                                <el-option value="篮球" label="篮球"></el-option>
                                <el-option value="舞蹈" label="舞蹈"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <!-- 第十行：个人履历 -->
                    <el-col :span="12">
                        <el-form-item label="个人履历" prop="human_history_records">
                            <el-input type="textarea"
                                      v-model="formData.human_history_records"
                                      :rows="4"
                                      placeholder="请输入个人履历"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <!-- 第十一行：备注 -->
                    <el-col :span="12">
                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea"
                                      v-model="formData.remark"
                                      :rows="4"
                                      placeholder="请输入备注"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
        </div>
    </div>

    <script>
        // 导入Vue 3核心API和Element Plus组件
        const { createApp, ref, reactive, onMounted, watch } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;

        createApp({
          setup() {
                // 级联选择器相关数据
                const selectedCascaderValue = ref([]);
                const cascaderOptions = ref([]);
                const cascaderProps = ref({
                    value: 'value',
                    label: 'label',
                    children: 'children'
                });
                const isLoading = ref(false);

                // 表单引用
                const formRef = ref(null);

                // 当前时间
                const registTime = ref('');

                // 图片上传相关
                const uploadAction = ref('/api/upload'); // 图片上传API
                const isUploading = ref(false);
                const tempImageFile = ref(null); // 临时存储图片文件
                const uploadMessage = ref('');
                const headers = ref({
                    'X-Requested-With': 'XMLHttpRequest'
                });

                // 表单数据
               const formData = ref({
                   imageUrl:'',
                  // 职位信息
                  res_id: null,                // 主键
                  human_major_kind_id: '01',    // 职位分类编号
                  human_major_kind_name: '销售', // 职位分类名称
                  human_major_id: '02',         // 职位编号
                  human_major_name: '总经理',   // 职位名称
                  engage_type: '社会招聘',      // 招聘类型

                  // 基本信息
                  human_name: '',               // 姓名
                  human_sex: '',                // 性别
                  human_email: '',              // 邮箱
                  human_picture: '',            // 照片（存储图片URL）

                  // 联系方式
                  human_telephone: '',          // 电话
                  human_homephone: '',          // 家庭电话
                  human_mobilephone: '',        // 手机

                  // 地址信息
                  human_address: '',            // 住址
                  human_postcode: '',           // 邮编

                  // 个人信息
                  human_nationality: '',        // 国籍
                  human_birthplace: '',         // 出生地
                  human_birthday: '2005-02-05', // 生日
                  human_race: '',               // 民族
                  human_religion: '无',         // 宗教信仰
                  human_party: '',              // 政治面貌
                  human_idcard: '',             // 身份证号
                  human_age: '',                // 年龄
                  human_college: '',            // 毕业院校
                  human_educated_degree: '',     // 教育程度
                  human_educated_years: '',      // 教育年限
                  human_educated_major: '',      // 学历专业
                  demand_salary_standard: '',   // 薪酬要求

                  // 个人特长
                  human_specility: '',          // 特长
                  human_hobby: '',              // 爱好

                  // 文本区域
                  human_history_records: '',    // 个人履历
                  remark: '',                   // 备注

                  // 流程相关字段（新增）
                  recomandation: '',            // 推荐意见
                  attachment_name: '',          // 档案附件
                  check_status: null,           // 复核状态
                  register: '系统自动',          // 登记人
                  regist_time: '',              // 登记时间
                  checker: '',                  // 复核人
                  check_time: '',               // 复核时间
                  interview_status: 0,       // 面试状态
                  total_points: null,           // 总分
                  test_amount: null,            // 考试次数
                  test_checker: '',             // 测试复核人
                  test_check_time: '',          // 测试复核时间
                  pass_register: '',            // 通过登记人
                  pass_regist_time: '',         // 通过登记时间
                  pass_checker: '',             // 通过复核人
                  pass_check_time: '',          // 通过复核时间
                  pass_check_status: null,      // 通过的复核状态
                  pass_checkComment: '',        // 录用申请审核意见
                  pass_passComment: ''          // 录用申请审批意见
                });

                // 表单验证规则
                const rules = reactive({
                  human_name: [
                    { required: true, message: '请填写姓名', trigger: 'blur' }
                  ],
                  human_telephone: [
                    { required: true, message: '请填写电话', trigger: 'blur' },
                    { type: 'number', message: '电话号码请填写数字', trigger: 'blur' }
                  ],
                  human_idcard: [
                    { required: true, message: '请填写身份证号码', trigger: 'blur' }
                  ],
                  human_picture: [
                    { required: true, message: '请上传照片', trigger: 'blur' }
                  ]
                });

                // 禁用未来日期
                function disabledDate(time) {
                  return time.getTime() > Date.now();
                }
      

      
                // 更新当前时间
                function updateTime() {
                  const now = new Date();
                  registTime.value = now.toISOString().split('T')[0] + ' ' +
                                     now.getHours().toString().padStart(2, '0') + ':' +
                                     now.getMinutes().toString().padStart(2, '0') + ':' +
                                     now.getSeconds().toString().padStart(2, '0');
                  formData.value.regist_time = registTime.value;
                }

                // 加载职位级联数据
                const loadJobCascaderData = async () => {
                    isLoading.value = true;
                    try {
                        const response = await axios.get('/engage/GetJobCascaderData');
                        if (response.status === 200 && response.data) {
                            cascaderOptions.value = response.data;
                            console.log(cascaderOptions.value)
                        } else {
                            throw new Error(response.data?.message || '获取职位数据失败');
                        }
                    } catch (error) {
                        console.error('加载职位数据错误:', error);
                        ElMessage.error('加载职位数据失败，请稍后再试');
                    } finally {
                        isLoading.value = false;
                    }
                }

                    const handleCascaderChange = (value) => {
          // 重置职位信息
          formData.value.human_major_kind_id = '';
          formData.value.human_major_kind_name = '';
          formData.value.human_major_id = '';
          formData.value.human_major_name = '';

          if (!value || value.length === 0) return;

          // 处理职位分类
          if (value.length >= 1) {
            const category = cascaderOptions.value.find(c => c.value === value[0]);
            if (category) {
              formData.value.human_major_kind_id = category.value;
              formData.value.human_major_kind_name = category.label;

              // 处理具体职位
              if (value.length >= 2 && category.children) {
                const job = category.children.find(j => j.value === value[1]);
                if (job) {
                  formData.value.human_major_id = job.value;
                  formData.value.human_major_name = job.label;
                }
              }
            }
          }
        };

                // 图片上传前的处理
                function beforeAvatarUpload(file) {
                    const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
                    const isAllowedType = allowedTypes.includes(file.type);
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isAllowedType) {
                        uploadMessage.value = '仅支持 JPG/JPEG/PNG/GIF 格式图片';
                        ElMessage.error(uploadMessage.value);
                        return false;
                    }

                    if (!isLt2M) {
                        uploadMessage.value = '文件大小不能超过 2MB';
                        ElMessage.error(uploadMessage.value);
                        return false;
                    }

                    uploadMessage.value = '准备上传...';
                    tempImageFile.value = file;
                    isUploading.value = true;
                    return true;
                }

                // 图片上传成功处理 - 关键：将图片路径赋值给formData.human_picture
                       function handleAvatarSuccess(response, file) {
            isUploading.value = false;
            try {
                if (response.success) {
                    // 拼接完整的图片URL (假设后端返回的是相对路径)
                    const baseUrl = window.location.origin; // 获取当前域名
                    const imageUrl = baseUrl + '/' + response.url;
                    //const img='D:\C\MVC\Xm\wwwroot\Uploader'+response.url;
                    formData.value.imageUrl=imageUrl;
                    formData.value.human_picture = response.url;
                    uploadMessage.value = '图片上传成功';
                    ElMessage.success(uploadMessage.value);
                } else {
                    throw new Error(response.message || '服务器返回异常');
                }
            } catch (error) {
                handleAvatarError(error);
            }
        }

                // 图片上传错误处理
                function handleAvatarError(error) {
                    isUploading.value = false;
                    uploadMessage.value = error.message || '图片上传失败，请重试';
                    ElMessage.error(uploadMessage.value);
                    console.error('上传错误:', error);
                }

                // 移除图片
                function removeImage() {
                    ElMessageBox.confirm('确定要移除这张照片吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        formData.value.human_picture = '';
                        tempImageFile.value = null;
                        uploadMessage.value = '';
                        ElMessage({
                            type: 'success',
                            message: '照片已移除'
                        });
                    }).catch(() => {
                        // 取消操作
                    });
                }

                // 提交表单 - 关键：确保图片上传后再提交
                const submitForm = async () => {
                  // 执行表单验证
                  const isValid = await formRef.value.validate();
                  if (!isValid) return;

                  try {
                    // 如果有图片未上传，先上传图片
                    if (tempImageFile.value && !formData.value.human_picture) {
                        await uploadImage();
                    }

                    console.log("提交的表单数据:", formData.value);

                    // 提交表单数据
                    const response = await axios.post(
                      "/engage/engage_resume_add",
                      Qs.stringify(formData.value),
                      { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
                    );

                    if (response.data.success) {
                      ElMessage.success('简历提交成功');
                      resetForm();
                    } else {
                      ElMessage.error('提交失败: ' + response.data.message);
                    }
                  } catch (error) {
                    console.error("提交错误:", error);
                    ElMessage.error('提交失败：' + error.message);
                  }
                }
                     const mapRowDataToFormData = (rowData) => {
          return {
            human_major_kind_id: rowData.major_kind_id || '',
            human_major_kind_name: rowData.major_kind_name || '',
            human_major_id: rowData.major_id || '',
            human_major_name: rowData.major_name || '',
            engage_type: rowData.engage_type || ''
          };
        };
                    const initFormData = () => {
          const encodedData = new URLSearchParams(window.location.search).get('data');

          if (!encodedData) return;

          try {
            // 解析URL参数
            const data = JSON.parse(decodeURIComponent(encodedData));
            const mappedData = mapRowDataToFormData(data);

            // 更新表单数据
            Object.assign(formData.value, mappedData);

            // 初始化级联选择器值
            if (mappedData.human_major_kind_id && mappedData.human_major_id) {
              selectedCascaderValue.value = [
                mappedData.human_major_kind_id,
                mappedData.human_major_id
              ];
            }
          } catch (error) {
            console.error('解析数据失败:', error);
          }
        };

        // 监听URL变化并初始化表单
        watch(() => window.location.search, initFormData, { immediate: true });

                // 单独的图片上传函数
                       const uploadImage = async () => {
            isUploading.value = true;
            try {
                const formDataForUpload = new FormData();
                formDataForUpload.append('file', tempImageFile.value);

                const uploadResponse = await axios.post(
                    uploadAction.value,
                    formDataForUpload,
                    { headers: { 'Content-Type': 'multipart/form-data', ...headers.value } }
                );

                if (uploadResponse.data.success) {
                    const baseUrl = window.location.origin;
                    formData.value.human_picture = baseUrl + '/' + uploadResponse.data.url;
                } else {
                    throw new Error(uploadResponse.data.message || '图片上传失败');
                }
            } catch (error) {
                throw error;
            } finally {
                isUploading.value = false;
            }
        }

                // 重置表单
                function resetForm() {
                  formRef.value.resetFields();
                  updateTime();
                  formData.value.register = '系统自动';
                  formData.value.regist_time = registTime.value;
                  formData.value.human_picture = '';
                  tempImageFile.value = null;
                  uploadMessage.value = '';
                }

                // 组件挂载时初始化
                onMounted(() => {
                  updateTime();
                  setInterval(updateTime, 1000);
                  loadJobCascaderData();
                });

                return {
                  formRef,
                  formData,
                  rules,
                  registTime,
                  submitForm,
                  resetForm,
                  disabledDate,
                  handleCascaderChange,
                  cascaderOptions,
                  cascaderProps,
                  selectedCascaderValue,
                  isLoading,
                  loadJobCascaderData,
                  uploadAction,
                  isUploading,
                  removeImage,
                  uploadMessage,
                  headers,
                  handleAvatarSuccess,
                  handleAvatarError,
                  beforeAvatarUpload
                };
          }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>
